<template>
  <div>
    <h3>我是用户界面</h3>
    <p>当前是用户 {{ userId }} 的界面</p>
    <router-link :to="'/users/' +userId+ '/detail'" tag="button"
      >用户详情</router-link
    >
    &nbsp;&nbsp;
    <router-link :to="'/users/'+userId+ '/backstage'" tag="button"
      >用户后台管理</router-link
    >&nbsp;&nbsp;
    <router-link :to="profiles" tag="button">档案</router-link>
    <br />
    <br />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    },
    profiles() {
      return {
        path: `/users/${this.userId}/profile`,
        query: { name: "why", age: 18, height: 1.88 },
      };
    },
  },
};
</script>


<style>
p {
  color: chartreuse;
  font-size: 50px;
}
.active {
  color: cyan;
  font-size: 20px;
}
</style>